<!DOCTYPE html>
<html lang="en">

<!-- TODO:需要将所有**href，src**引用改为thymeleaf的方式 -->

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta http-equiv="x-ua-compatible" content="ie=edge">

  <title>博物馆文物后台管理系统</title>

  <!-- 共有的部分，抽取到fragment-->
  <link rel="icon" href="../dist/img/logoico1.ico" type="image/ico" />
  <link rel="stylesheet" href="../plugins/fontawesome-free/css/all.min.css">
  <link rel="stylesheet" href="../dist/css/adminlte.min.css">
  <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">

  <!-- 只有自己引用 -->
  <link rel="stylesheet" href="../plugins/ekko-lightbox/ekko-lightbox.css">
  <link rel="stylesheet" href="../plugins/sweetalert2-theme-bootstrap-4/bootstrap-4.min.css">
  <link rel="stylesheet" href="../site/flow/flow.css">

</head>

<body class="hold-transition sidebar-mini">
  <div class="wrapper">

    <nav class="main-header navbar navbar-expand navbar-white navbar-light" style="position: relative;">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link" data-widget="pushmenu" href="#"><i class="fas fa-bars"></i></a>
        </li>
      </ul>
      <div style="position: absolute;right: 15px;">
        <!-- TODO:href为注销的路径 -->
        <a class="btn btn-navbar" href="#">
          <i class="fa fa-door-open"></i>
          退出登录
        </a>
      </div>
    </nav>

    <aside class="main-sidebar sidebar-dark-primary elevation-4">
      <a href="#" class="brand-link">
        <img src="../dist/img/logo.png" style="object-fit: cover;background-color: aliceblue;" alt="AdminLTE Logo"
          class="brand-image img-circle elevation-3" style="opacity: .8">
        <span class="brand-text font-weight-light">文物后台管理</span>
      </a>
      <div class="sidebar">
        <div class="user-panel mt-3 pb-3 mb-3 d-flex">
          <div class="image">
            <img src="../dist/img/avatar5.png" class="img-circle elevation-2" alt="User Image">
          </div>
          <div class="info">
            <!-- TODO:张三-文职 需要数据用户名和职务 -->
            <a href="#" class="d-block">张三-文职</a>
          </div>
        </div>
        <nav class="mt-2">
          <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
            <!-- TODO:侧边栏导航，href路径改为真实路径 -->
            <li class="nav-item has-treeview">
              <a href="./info.html" class="nav-link">
                <i class="nav-icon fas fa-th"></i>
                <p>
                  文物信息管理
                  <i class="right fas fa-angle-left"></i>
                </p>
              </a>
              <ul class="nav nav-treeview">
                <li class="nav-item">
                  <a href="./info.html" class="nav-link">
                    <i class="far fa-circle nav-icon"></i>
                    <p>文物信息一览</p>
                  </a>
                </li>
                <li class="nav-item">
                  <a href="./recorded.html" class="nav-link">
                    <i class="far fa-circle nav-icon"></i>
                    <p>文物信息录入</p>
                  </a>
                </li>
              </ul>
            </li>
            <li class="nav-item">
              <a href="./flow.html" class="nav-link">
                <i class="nav-icon fa fa-recycle"></i>
                <p>
                  文物流动管理
                </p>
              </a>
            </li>
            <li class="nav-item">
              <a href="./inventory.html" class="nav-link">
                <i class="nav-icon fa fa-balance-scale"></i>
                <p>
                  文物盘点管理
                </p>
              </a>
            </li>
            <li class="nav-item">
              <a href="./warehouse.html" class="nav-link">
                <i class="nav-icon fa fa-university"></i>
                <p>
                  仓库管理
                </p>
              </a>
            </li>
            <li class="nav-item">
              <a href="./profile.html" class="nav-link">
                <i class="nav-icon fas fa-user-circle"></i>
                <p>
                  员工管理
                </p>
              </a>
            </li>
          </ul>
        </nav>
      </div>
    </aside>

    <!-- 内容 -->
    <div class="content-wrapper">
      <div class="content-header">
        <div class="container-fluid">
          <div class="row mb-2">
            <div class="col-sm-6">
              <h1>文物流动记录</h1>
            </div>
          </div>
        </div><!-- /.container-fluid -->
      </div>
      <!-- TODO:数据库的流动表需要增加操作人的字段 -->
      <div class="content">
        <div class="container-fluid">
          <div class="row">
            <div class="col-12">
              <div class="card">
                <div class="card-header">
                  <!-- TODO:搜索框 ，如果不需要这个功能可以删除-->
                  <div class="card-tools">
                    <div class="input-group input-group-sm" style="width: 200px;">
                      <input type="text" name="table_search" class="form-control float-right" placeholder="搜索">
                      <div class="input-group-append">
                        <button type="submit" class="btn btn-default"><i class="fas fa-search"></i></button>
                      </div>
                    </div>
                  </div>

                  <div class="btn-group">
                    <button type="button" class="btn btn-outline-primary btn-sm dropdown-toggle" data-toggle="dropdown"
                      aria-haspopup="true" aria-expanded="false">
                      <i class="fa fa-filter"></i>
                      筛选
                    </button>
                    <!-- TODO:筛选，href为筛选的路径 -->
                    <div class="dropdown-menu">
                      <a class="dropdown-item" href="#">全部</a>
                      <div class="dropdown-divider"></div>
                      <a class="dropdown-item" href="#">最近7天</a>
                      <a class="dropdown-item" href="#">最近1个月</a>
                      <a class="dropdown-item" href="#">最近半年</a>
                      <a class="dropdown-item" href="#">最近1年</a>
                      <div class="dropdown-divider"></div>
                      <a class="dropdown-item" href="#">入库</a>
                      <a class="dropdown-item" href="#">修复</a>
                      <a class="dropdown-item" href="#">外借</a>
                      <a class="dropdown-item" href="#">离馆</a>
                    </div>
                  </div>
                  <div style="display: inline-block;">
                    <button class="btn btn-outline-info btn-sm" data-toggle="modal" data-target="#modal-export-excel">
                      <i class="fa fa-file-excel"></i>
                      导出excel</button>
                  </div>
                </div><!-- /.card-header -->
                <div class="card-body table-responsive p-0" style="height: 500px;">
                  <table class="table table-head-fixed text-nowrap table-bordered table-hover table-striped my-table"
                    id="userTable">
                    <thead>
                      <tr>
                        <th>#</th>
                        <th>操作编号</th>
                        <th>文物名称</th>
                        <th>文物图片</th>
                        <th>文物去向</th>
                        <th>文物操作</th>
                        <th>操作人</th>
                        <th>操作时间</th>
                        <th>归还时间</th>
                        <th>备注</th>
                      </tr>
                    </thead>
                    <tbody>
                      <!-- TODO:修改真实数据-->
                      <tr>
                        <td>1</td>
                        <td>1000</td>
                        <td>唐三彩</td>
                        <td>
                          <!-- TODO:需要将data-title替换为文物的名字 -->
                          <a data-toggle="lightbox" data-title="唐三彩"
                            href="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3762127541,3137938035&fm=26&gp=0.jpg">
                            <img width="40"
                              src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3762127541,3137938035&fm=26&gp=0.jpg"
                              style="width: auto;height: 60px;" alt="文物图片">
                          </a>
                        </td>
                        <td>外出展览</td>
                        <!-- TODO:badge-danger需要改为操作对应的颜色 -->
                        <td><span class="badge badge-danger my-badge">离馆</span></td>
                        <td>仓管小王</td>
                        <td>2020-5-11</td>
                        <td>暂未归还</td>
                        <td>暂无</td>
                      </tr>
                      <tr>
                        <td>2</td>
                        <td>1001</td>
                        <td>尚方宝剑</td>
                        <td>
                          <a data-toggle="lightbox" data-title="尚方宝剑"
                            href="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1589271564361&di=b2564507d29e2d1c5a2f4915fe4d02cb&imgtype=0&src=http%3A%2F%2Fp3.ssl.cdn.btime.com%2Ft01e344999c65e7ea96.jpg%3Fsize%3D697x468">
                            <img width="40"
                              src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1589271564361&di=b2564507d29e2d1c5a2f4915fe4d02cb&imgtype=0&src=http%3A%2F%2Fp3.ssl.cdn.btime.com%2Ft01e344999c65e7ea96.jpg%3Fsize%3D697x468"
                              style="width: auto;height: 60px;" alt="文物图片">
                          </a>
                        </td>
                        <td>入库</td>
                        <td><span class="badge badge-success my-badge">入库</span></span></td>
                        <td>仓管小红</td>
                        <td>2020-3-11</td>
                        <td>2020-5-11</td>
                        <td>暂无</td>
                      </tr>
                      <tr>
                        <td>3</td>
                        <td>1002</td>
                        <td>青铜鼎</td>
                        <td>
                          <a data-toggle="lightbox" data-title="青铜鼎"
                            href="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1589271623311&di=ed508bf15206885ba45db1a20ae5c08a&imgtype=0&src=http%3A%2F%2Fl.b2b168.com%2F2015%2F04%2F08%2F13%2F201504081337110029644.jpg">
                            <img width="40"
                              src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1589271623311&di=ed508bf15206885ba45db1a20ae5c08a&imgtype=0&src=http%3A%2F%2Fl.b2b168.com%2F2015%2F04%2F08%2F13%2F201504081337110029644.jpg"
                              style="width: auto;height: 60px;" alt="文物图片">
                          </a>
                        </td>
                        <td>送至xxx修复</td>
                        <td><span class="badge badge-warning my-badge">修复</span></td>
                        <td>仓管小文</td>
                        <td>2020-5-11</td>
                        <td>暂未归还</td>
                        <td>暂无</td>
                      </tr>
                      <tr>
                        <td>4</td>
                        <td>1003</td>
                        <td>清明上河图</td>
                        <td>
                          <a data-toggle="lightbox" data-title="清明上河图"
                            href="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1589274557327&di=188c785b31c96644a5309b264bc56fff&imgtype=0&src=http%3A%2F%2Fn.sinaimg.cn%2Ftranslate%2F651%2Fw1024h427%2F20180427%2FmSU_-fztkpip4599510.jpg">
                            <img width="40"
                              src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1589274557327&di=188c785b31c96644a5309b264bc56fff&imgtype=0&src=http%3A%2F%2Fn.sinaimg.cn%2Ftranslate%2F651%2Fw1024h427%2F20180427%2FmSU_-fztkpip4599510.jpg"
                              style="width: auto;height: 60px;" alt="文物图片">
                          </a>
                        </td>
                        <td>借给xxx博物馆</td>
                        <td><span class="badge badge-info my-badge">外借</span></td>
                        <td>仓管小文</td>
                        <td>2020-5-11</td>
                        <td>暂未归还</td>
                        <td>暂无</td>
                      </tr>
                    </tbody>
                  </table>
                </div>
                <!-- 分页 -->
                <div class="card-footer clearfix">
                  <ul class="pagination pagination-sm m-0 float-right">
                    <!-- TODO:需要根据数据库条数判断-->
                    <li class="page-item"><a class="page-link" href="#">&laquo;</a></li>
                    <li class="page-item"><a class="page-link" href="#">1</a></li>
                    <li class="page-item"><a class="page-link" href="#">2</a></li>
                    <li class="page-item"><a class="page-link" href="#">3</a></li>
                    <li class="page-item"><a class="page-link" href="#">&raquo;</a></li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="modal fade" id="modal-export-excel">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h4 class="modal-title">导出excel</h4>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <!-- TODO:需要将action改为导出excel的路径,以下多选框中，value=0表示获取全部 -->
            <form class="form-horizontal" action="#">
              <div class="card-body">
                <div class="form-group row">
                  <label for="selRangeDate" class="col-sm-4 col-form-label">操作时间范围</label>
                  <div class="col-sm-8">
                    <select class="form-control" name="dateRange" id="selRangeDate">
                      <option value=0 selected>全部</option>
                      <option value=7>最近7天</option>
                      <option value=30>最近1个月</option>
                      <option value=181>最近半年</option>
                      <option value=365>最近一年</option>
                    </select>
                  </div>
                </div>
                <div class="form-group row">
                  <label for="selState" class="col-sm-4 col-form-label">操作</label>
                  <div class="col-sm-8">
                    <select class="form-control" name="state" id="selState">
                      <option value=0 selected>全部</option>
                      <option value=1>入库</option>
                      <option value=2>离馆</option>
                      <option value=3>外借</option>
                      <option value=4>修复</option>
                    </select>
                  </div>
                </div>
                <div class="form-group row">
                  <label for="selExportNumber" class="col-sm-4 col-form-label">导出条数</label>
                  <div class="col-sm-8">
                    <select class="form-control" name="count" id="selExportNumber">
                      <option value="0" selected>全部</option>
                      <option value=10>10</option>
                      <option value=25>25</option>
                      <option value=50>50</option>
                      <option value=100>100</option>
                      <option value=150>150</option>
                    </select>
                  </div>
                </div>
              </div>
            </form>
          </div>
          <div class="modal-footer justify-content-between">
            <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            <button type="button" id="exportExcelBtn" class="btn btn-primary">导出</button>
          </div>
        </div>
        <!-- /.modal-content -->
      </div>
      <!-- /.modal-dialog -->
    </div>


    <aside class="control-sidebar control-sidebar-dark">
      <div class="p-3">
        <h5>Title</h5>
        <p>Sidebar content</p>
      </div>
    </aside>

    <footer class="main-footer">
      <div class="float-right d-none d-sm-inline">
        国家博物馆后台管理系统
      </div>
      <strong>Copyright &copy; 2020-2025 软件B班4组.</strong> All rights reserved.
    </footer>
  </div>
  <!-- 共有的部分 -->
  <script src="../plugins/jquery/jquery.min.js"></script>
  <script src="../plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
  <script src="../dist/js/common.js"></script>
  <script src="../dist/js/adminlte.min.js"></script>

  <!-- 只有自己引用 -->
  <script src="../plugins/sweetalert2/sweetalert2.min.js"></script>
  <script src="../plugins/ekko-lightbox/ekko-lightbox.min.js"></script>
  <script src="../site/flow/flow.js"></script>
</body>

</html>